.container {
  display: flex;
  flex-direction: column;
  gap: 5px;

  .wrapper {
    display: flex;
    gap: 5px;
    align-items: center;

    .root {
      touch-action: none;
      user-select: none;

      position: relative;

      display: flex;
      align-items: center;

      width: 200px;
      height: 20px;

      .track {
        position: relative;

        flex-grow: 1;

        height: 3px;

        background-color: var(--color-light-100);
        border-radius: 9999px;

        .range {
          position: absolute;
          height: 100%;
          background-color: var(--color-primary-500);
          border-radius: 9999px;
        }
      }

      .thumb {
        display: block;

        box-sizing: content-box;
        width: 8px;
        height: 8px;

        background-color: white;
        border: 4px solid var(--color-primary-500);
        border-radius: 50%;

        &:focus-visible {
          outline: none;
        }
      }
    }
  }
}
